import React, { Component } from 'react';
import {
  Button,
  Modal,
  Select,
  Form,
  Row,
  Col,
  Input,
  Radio,
  Table,
  DatePicker,
  message,
  Popconfirm,
  InputNumber,
  Divider,
} from 'antd';
const { Option } = Select;
import BaseComponent from '@/components/BaseComponent';
import { connect } from 'dva';
import moment from 'moment';
import TableEdit from '../TableEdit';

@connect(({ user }) => ({
  // data: risk.riskData,
  currentUser: user.currentUser,
}))
@Form.create()
export default class index extends BaseComponent {
  state = {
    visible: false,
    form: {},
    sgblCodeData: [],
    bmblCodeData: [],
    wblCodeData: [],
    sezcCodeData: [],
  };

  showModal = () => {
    this.findAllDictName();
    this.setState({
      visible: true,
    });
  };

  handleOk = () => {
    this.props.form.validateFields((errors, values) => {
      if (!errors) {
        this.edit();
        this.setState({
          visible: false,
        });
      } else {
        this.errorMessage('请完善表单后提交');
      }
    });
  };

  //获取数据
  handleChildData = data => {
    this.setState(
      params => ({
        form: {
          ...params.form,
          followUpConditionOfficeList: data,
        },
      }),
      () => {
        console.log(this.state.form.followUpConditionOfficeList);
      }
    );
  };

  handleCancel = () => {
    this.setState({
      visible: false,
    });
  };

  nameChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        name: value,
      },
    }));
  };
  sfzChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        sfz: value,
      },
    }));
  };
  screeningIdChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        screeningId: value,
      },
    }));
  };
  phoneChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        phone: value,
      },
    }));
  };
  sgblCodeChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        sgblCode: value,
      },
    }));
  };
  bmblCodeChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        bmblCode: value,
      },
    }));
  };
  wblCodeChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        wblCode: value,
      },
    }));
  };
  sezcCodeChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        sezcCode: value,
      },
    }));
  };
  treatChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        treat: value,
      },
    }));
  };
  noticeChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        notice: value,
      },
    }));
  };
  contactChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        contact: value,
      },
    }));
  };
  deathTimeChange = (date, dateString) => {
    console.log(date, dateString);
    this.setState(params => ({
      form: {
        ...params.form,
        deathTime: dateString,
      },
    }));
  };
  deathCauseChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        deathCause: value,
      },
    }));
  };
  icd10Change = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        icd10: value,
      },
    }));
  };
  loseFollowUpCauseChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        loseFollowUpCause: value,
      },
    }));
  };

  //编辑
  edit = () => {
    const request = {
      id: this.props.record.id,
      followUpEpidemic: {
        contact: this.state.form.contact,
        treat: this.state.form.treat,
        notice: this.state.form.notice,
        deathTime: this.state.form.deathTime,
        deathCause: this.state.form.deathCause,
        icd10: this.state.form.icd10,
        loseFollowUpCause: this.state.form.loseFollowUpCause,
      },
      followUpConditionOfficeList: this.state.form.followUpConditionOfficeList,
    };
    const data = JSON.stringify(request);
    this.execHttp('followUpList/edit', { data }).then(resp => {
      if (resp && resp.success) {
        message.success(resp.message);
        this.props.getDataByPage();
      }
    });
  };

  /**详情*/
  selById = () => {
    this.execHttp('followUpList/selById', {
      id: this.props.record.id,
    }).then(resp => {
      if (resp && resp.success) {
        const { cerSysteminitImportInfo, epidemic, conditionList } = resp.data;
        if (Object.prototype.toString.call(epidemic) !== '[object Null]') {
          this.setState(params => ({
            form: {
              ...params.form,
              contact: epidemic.contact,
              treat: epidemic.treat,
              notice: epidemic.notice,
              deathTime: epidemic.deathTime,
              deathCause: epidemic.deathCause,
              icd10: epidemic.icd10,
              loseFollowUpCause: epidemic.loseFollowUpCause,
            },
          }));
        }
        this.setState(
          params => ({
            form: {
              ...params.form,
              name: cerSysteminitImportInfo.name,
              sfz: cerSysteminitImportInfo.sfz,
              screeningId: cerSysteminitImportInfo.screeningId,
              phone: cerSysteminitImportInfo.phone,
              sgblCode: cerSysteminitImportInfo.sgblCode,
              bmblCode: cerSysteminitImportInfo.bmblCode,
              wblCode: cerSysteminitImportInfo.wblCode,
              sezcCode: cerSysteminitImportInfo.sezcCode,
              followUpConditionOfficeList: conditionList,
            },
          }),
          () => {
            console.log(
              ' this.state.form.followUpConditionOfficeList',
              this.state.form.followUpConditionOfficeList
            );
          }
        );
      }
    });
  };
  //字典
  findAllDictName = () => {
    this.execHttp('treatmentList/findAllDictName').then(resp => {
      if (resp && resp.success) {
        this.setState(
          {
            sgblCodeData: resp.data.sgbl_code,
            bmblCodeData: resp.data.bmbl_code,
            wblCodeData: resp.data.wbl_code,
            sezcCodeData: resp.data.sezc_code,
          },
          () => {
            this.selById();
          }
        );
      }
    });
  };

  render() {
    // const data = [
    //     {
    //         key: '1',
    //         number: '22',
    //         planTime: '2023-12-01',
    //         actualTime: '2023-12-01',
    //         esophagus: '1',
    //         cardia: '1',
    //         stomach: '1',
    //         duodenum: '1',
    //     },
    //     {
    //         key: '2',
    //         number: '33',
    //         planTime: '2023-12-01',
    //         actualTime: '2023-12-01',
    //         esophagus: '4',
    //         cardia: '4',
    //         stomach: '4',
    //         duodenum: '4',
    //     },
    // ];
    // const columns = [
    //     {
    //         title: '随访次数',
    //         dataIndex: 'number',
    //         key: 'number',
    //         render: (text, record, index) => (
    //             <div>
    //                 <Input placeholder="请输入随访次数" value={record.number} onChange={()=>this.numberRecordChange(record)} style={{ width: 200 }} />
    //             </div>
    //         )
    //     },
    //     {
    //         title: '计划随访时间',
    //         dataIndex: 'planTime',
    //         key: 'planTime',
    //         render: (text, record, index) => (
    //             <div>
    //                 <DatePicker style={{ width: 200 }} showTime format="YYYY-MM-DD "
    //                     value={record.planTime == null || undefined ? form.planTime : moment(form.planTime, 'YYYY-MM-DD ')}
    //                     onChange={()=>this.planTimeRecordChange(record)} />
    //             </div>
    //         )
    //     },
    //     {
    //         title: '实际随访时间',
    //         dataIndex: 'actualTime',
    //         key: 'actualTime',
    //         render: (text, record, index) => (
    //             <div>
    //                 <DatePicker style={{ width: 200 }} showTime format="YYYY-MM-DD "
    //                     value={record.actualTime == null || undefined ? form.actualTime : moment(form.actualTime, 'YYYY-MM-DD ')}
    //                     onChange={()=>this.actualTimeRecordChange(record)} />
    //             </div>
    //         )
    //     },
    // {
    //     title: '食管最高病例代码',
    //     dataIndex: 'esophagus',
    //     key: 'esophagus',
    //     render: (text, record, index) => {
    //         const { esophagus } = record
    //         const str = this.state.sgblCodeData
    //             .filter(item => item.dictValue === esophagus)
    //             .map(item => item.dictName);
    //         return <span>{str}</span>;
    //     },
    // },
    // {
    //     title: '贲门最高病理代码',
    //     dataIndex: 'cardia',
    //     key: 'cardia',
    //     render: (text, record, index) => {
    //         const { cardia } = record
    //         const str = this.state.bmblCodeData
    //             .filter(item => item.dictValue === cardia)
    //             .map(item => item.dictName);
    //         return <span>{str}</span>;
    //     },

    // },
    // {
    //     title: '胃最高病理代码',
    //     dataIndex: 'stomach',
    //     key: 'stomach',
    //     render: (text, record, index) => {
    //         const { stomach } = record
    //         const str = this.state.wblCodeData
    //             .filter(item => item.dictValue === stomach)
    //             .map(item => item.dictName);
    //         return <span>{str}</span>;
    //     },

    // },
    // {
    //     title: '十二指肠最高病理代码',
    //     dataIndex: 'duodenum',
    //     key: 'duodenum',
    //     render: (text, record, index) => {
    //         const { duodenum } = record
    //         const str = this.state.sezcCodeData
    //             .filter(item => item.dictValue === duodenum)
    //             .map(item => item.dictName);
    //         return <span>{str}</span>;
    //     },
    // },
    // {
    //     title: '操作',
    //     key: 'action',
    //     render: (text, record) => (
    //         <div>
    //             <Button type="primary" onClick={this.searchClick} >添加</Button>
    //         </div>
    //     ),
    // },
    // ];
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };

    const { visible, form } = this.state;

    return (
      <div>
        <Button type="primary" onClick={this.showModal}>
          修改
        </Button>
        <Modal
          title="修改"
          visible={visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          width={1500}
        >
          <h3>基本信息</h3>
          <Form {...formItemLayout}>
            <Row gutter={16}>
              <Col span={6}>
                <Form.Item label="姓名">
                  <Input
                    placeholder="请输入姓名"
                    value={form.name}
                    onChange={this.nameChange}
                    style={{ width: 200 }}
                  />
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="身份证">
                  <Input
                    placeholder="请输入身份证"
                    value={form.sfz}
                    onChange={this.sfzChange}
                    style={{ width: 200 }}
                  />
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="调查对象ID号">
                  <Input
                    placeholder="请输入调查对象ID号"
                    value={form.screeningId}
                    onChange={this.screeningIdChange}
                    style={{ width: 200 }}
                  />
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="联系电话">
                  <Input
                    placeholder="请输入联系电话"
                    value={form.phone}
                    onChange={this.phoneChange}
                    style={{ width: 200 }}
                  />
                </Form.Item>
              </Col>
            </Row>

            <h3>随访人员的病理结果</h3>

            <Row gutter={16}>
              <Col span={6}>
                <Form.Item label="食管最高病理诊断代码(初筛)">
                  <Select
                    allowClear
                    value={form.sgblCode}
                    onChange={this.sgblCodeChange}
                    style={{ width: 200 }}
                    disabled
                    placeholder="请选择食管最高病理诊断代码"
                  >
                    {this.state.sgblCodeData.map(item => (
                      <Select.Option key={item.dictValue}>
                        {' '}
                        {'(' + item.dictValue + ')' + item.dictName}
                      </Select.Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="贲门最高病理诊断代码(初筛)">
                  <Select
                    allowClear
                    value={form.bmblCode}
                    onChange={this.bmblCodeChange}
                    style={{ width: 200 }}
                    disabled
                    placeholder="请选择贲门最高病理诊断代码"
                  >
                    {this.state.bmblCodeData.map(item => (
                      <Select.Option key={item.dictValue}>
                        {' '}
                        {'(' + item.dictValue + ')' + item.dictName}
                      </Select.Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="胃最高病理诊断代码(初筛)">
                  <Select
                    allowClear
                    value={form.wblCode}
                    onChange={this.wblCodeChange}
                    style={{ width: 200 }}
                    disabled
                    placeholder="请选择胃最高病理诊断代码"
                  >
                    {this.state.wblCodeData.map(item => (
                      <Select.Option key={item.dictValue}>
                        {' '}
                        {'(' + item.dictValue + ')' + item.dictName}
                      </Select.Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="十二指肠最高病理诊断代码(初筛)">
                  <Select
                    allowClear
                    value={form.sezcCode}
                    onChange={this.sezcCodeChange}
                    style={{ width: 200 }}
                    disabled
                    placeholder="请选择十二指肠最高病理诊断代码"
                  >
                    {this.state.sezcCodeData.map(item => (
                      <Select.Option key={item.dictValue}>
                        {' '}
                        {'(' + item.dictValue + ')' + item.dictName}
                      </Select.Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>
            </Row>

            <h3>流行病随访</h3>
            <Row gutter={16}>
              <Col span={6}>
                <Form.Item label="最后接触状态">
                  {getFieldDecorator('provinceId', {
                    initialValue: this.state.form.contact,
                    rules: [{ required: true, message: '最后接触状态必选' }],
                  })(
                    <Radio.Group onChange={this.contactChange}>
                      <Radio value={1}>存活</Radio>
                      <Radio value={2}>死亡</Radio>
                      <Radio value={3}>失访</Radio>
                    </Radio.Group>
                  )}
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16} style={{ display: this.state.form.contact === 2 ? 'block' : 'none' }}>
              <Col span={6}>
                <Form.Item label="死亡时间">
                  {getFieldDecorator('deathTime', {
                    initialValue: this.state.form.deathTime
                      ? ''
                      : moment(this.state.form.deathTime, 'YYYY-MM-DD'),
                    rules: [{ required: this.state.form.contact === 2, message: '死亡时间必填' }],
                  })(
                    <DatePicker
                      style={{ width: 200 }}
                      showTime
                      format="YYYY-MM-DD"
                      onChange={this.deathTimeChange}
                    />
                  )}
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="根本原因">
                  {getFieldDecorator('deathCause', {
                    initialValue: this.state.form.deathCause,
                    rules: [{ required: this.state.form.contact === 2, message: '根本原因必填' }],
                  })(
                    <Input
                      placeholder="请输入根本原因"
                      onChange={this.deathCauseChange}
                      style={{ width: 200 }}
                    />
                  )}
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="ICD-10">
                  {getFieldDecorator('icd10', {
                    initialValue: this.state.form.icd10,
                    rules: [{ required: this.state.form.contact === 2, message: 'ICD-10必填' }],
                  })(
                    <Input
                      placeholder="请输入ICD-10"
                      onChange={this.icd10Change}
                      style={{ width: 200 }}
                    />
                  )}
                </Form.Item>
              </Col>
            </Row>

            <Row gutter={16} style={{ display: this.state.form.contact === 3 ? 'block' : 'none' }}>
              <Col span={6}>
                <Form.Item label="失访原因">
                  {getFieldDecorator('loseFollowUpCause', {
                    initialValue: this.state.form.loseFollowUpCause,
                    rules: [{ required: this.state.form.contact === 3, message: '失访原因必选' }],
                  })(
                    <Radio.Group onChange={this.loseFollowUpCauseChange}>
                      <Radio value={1}>外迁</Radio>
                      <Radio value={2}>拒绝配合）</Radio>
                    </Radio.Group>
                  )}
                </Form.Item>
              </Col>
            </Row>

            <Row gutter={16}>
              <Col span={6}>
                <Form.Item label="是否治疗">
                  {getFieldDecorator('treat', {
                    initialValue: this.state.form.treat,
                    rules: [{ required: true, message: '是否治疗必选' }],
                  })(
                    <Radio.Group onChange={this.treatChange}>
                      <Radio value={1}>治疗</Radio>
                      <Radio value={2}>未治疗</Radio>
                      <Radio value={3}>不明</Radio>
                    </Radio.Group>
                  )}
                </Form.Item>
              </Col>
            </Row>

            <Row gutter={16}>
              <Col span={6}>
                <Form.Item label="是否通知随访">
                  {getFieldDecorator('notice', {
                    initialValue: this.state.form.notice,
                    rules: [{ required: true, message: '是否治疗必选' }],
                  })(
                    <Radio.Group onChange={this.noticeChange}>
                      <Radio value={1}>是</Radio>
                      <Radio value={2}>否</Radio>
                    </Radio.Group>
                  )}
                </Form.Item>
              </Col>
            </Row>

            <TableEdit
              sg={this.state.form.followUpConditionOfficeList}
              handleChildData={this.handleChildData}
            ></TableEdit>

            {/* <h3>随访情况</h3> */}
            {/* <Table columns={columns} dataSource={data} rowKey='id' /> */}
            {/* <Table columns={columns} dataSource={form.followUpConditionOfficeList} rowKey='id' /> */}
            {/* <EditTable ></EditTable> */}

            {/* // sg={sg}
                        // wrappedComponentRef={esophagusview => (this.esophagusview = esophagusview)} */}
          </Form>
        </Modal>
      </div>
    );
  }
}
